<template>
  <div>
    <ul v-if="Object.keys(comment).length > 0">
      <li v-for="item in comment.comments" :key="item.parentCommentId" class="mb-2">
        <div class="flex">
          <div class="w-15 h-15 mr-3 cursor-pointer" @click="jumpPage(item.user.userId, 1000)">
            <img style="width: 100%;height: 100%" :src="item.user.avatarUrl" alt="">
          </div>
          <div class="flex-1 yu-bgColor-tew-only p-2">
            <p class="flex items-center mt-0 mb-0 w-full justify-between">
            <span class="yu-titleColor yu-textColor-hover"
                  @click="jumpPage(item.user.userId, 1000)">{{ item.user.nickname }}</span>
              <span class="flex items-center">
            <span class="text-xs">{{ timestampToYMD(item.time, 's') }}</span>
            <i class="i-mdi-clock-time-eight-outline inline-block text-sm ml-2"></i>
          </span>
            </p>
            <p>回复我：{{ item.content }}</p>
            <div class="w-full relative">
          <span
              class="text-xs inline-block w-10/12 yu-titleColor yu-textColor-hover"
              @click="jumpPage(item.resourceJson.id, item.resourceJson.resourceType)">
            {{ item.beRepliedContent }}
          </span>
              <p class="absolute right-0 top-0 text-xs mt-0 mb-0">
                <span class="yu-textColor-hover"
                      @click="delReply(item.parentCommentId, item.resourceJson.id, item.resourceJson.resourceType, item.combindId.split(':')[1], item.beRepliedContent)">删除</span>
                <i class="mr-2 ml-2">|</i>
                <span class="yu-textColor-hover" @click="showReply(item.parentCommentId)">回复</span>
              </p>
            </div>
            <div class="border-t-1 mt-2 pt-2">
              <reply
                  :saveId="saveId"
                  :resourceType="item.resourceJson.resourceType"
                  :commentId="item.parentCommentId"
                  :id="item.resourceJson.id"
                  @setSaveIdNull="setSaveIdNull"
              />
            </div>
          </div>
        </div>
      </li>
    </ul>
    <van-pagination
        v-if="comment.total > 30"
        class="van-pagination"
        v-model="currentPage"
        :total-items="comment.total"
        :items-per-page="30"
        :show-page-size="6"
        force-ellipses
        @change="pageChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left"/>
      </template>
      <template #next-text>
        <van-icon name="arrow"/>
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </div>
</template>

<script setup>
import {getMsgComments} from "@/api/message/index";
import {timestampToYMD} from "@/utils/index";
import Reply from '@/components/Reply/index.vue'
import {useStore} from "@/store/index";
import {reactive, ref, toRefs, watchEffect} from "vue";
import {useRouter} from "vue-router";
import {sendOrDelComment} from "../../../../api/review/index.js";
import {Toast} from "vant";

const router = useRouter()
const store = useStore()
const data = reactive({
  currentPage: 1, // 默认展示第几页
  saveId: null, // 显示回复框的id
  page: {
    limit: 30,
    before: 0
  }
})
const {page, currentPage, saveId} = toRefs(data)
// 存储有关我的评论数据
const comment = ref({})
const getMsgCommentsFn = () => {
  getMsgComments({uid: store.userInfo.userId, ...data.page}).then(res => {
    if (res.code === 200) {
      if (res.comments.length > 0)
        res.comments = res.comments.map(item => {
          return {
            ...item,
            resourceJson: JSON.parse(item.resourceJson)
          }
        })
      comment.value = res
    }
    console.log(comment.value)
  })
}

// 分页切换
const pageChange = () => {
  data.page.before = comment.value.comments[comment.value.comments.length - 1].time
  // getMsgCommentsFn()
}
// 监听userId是否存在，当getMsgCommentsFn中的参数发生改变函数 watchEffect也会执行
watchEffect(() => {
  if (store.userInfo.userId) {
    console.log(111)
    getMsgCommentsFn()
  }
})

// 歌单 0
// 跳转到艺术家 1
// 用户主页 2
// 跳转到电台详情 3
// 跳转到专辑详情 4
// 跳转到歌曲详情 5
// 跳转到用户详情
const jumpPage = (id, type) => {
  const typeCol = {
    1000: '/user/homepage', // 用户主页
    0: '/play-list-detail', //  歌单
    17: '/dj-radio', //  跳转到电台详情
    3: '/collection-detail', // 跳转到专辑详情
    4: '/pc-song-detail' //  跳转到歌曲详情
  }
  router.push({
    path: typeCol[type],
    query: {
      id
    }
  })
}

// 显示回复框
const showReply = (id) => {
  if (data.saveId !== id) data.saveId = id
  else data.saveId = null
}
// 保存的saveId设置为Null
const setSaveIdNull = (saveId) => {
  data.saveId = saveId
}

// 删除数据评论
// 回复
// 可以发送删除回复评论 params = {
// t: 1 发送 2 回复 0 删除， type: 用来判断是0：歌曲还是2：歌单还是其他的,
// id: 对应资源id, content: 要发送的内容， 如果如果要是删除的话这个id是不需要的，
// commentId: 回复评论的id，也是删除的id
// 发送动态不需要id但是需要threadId
// }
const delReply = async (commentId, id, resourceType, combindId, beRepliedContent) => {
  let params = {t: 0, type: 2, commentId: beRepliedContent === '我的评论: 该评论已删除' ? combindId : commentId, id}
  const currentType = {
    // resourceType: 0 歌单
    0: () => {
      // 设置歌曲的type
      params.type = 2
    },
    // resourceType: 4 歌曲
    4: () => {
      // 设置歌单的type
      params.type = 0
    },
    // resourceType: 2 动态
    2: () => {
      // 设置动态的type
      params.type = 6
      // params.threadId = props.threadId
    },
    3: () => {
      // 设置专辑
      params.type = 3
    },
    14: () => {
      // 设置专辑
      params.type = 4
    }
  }
  currentType && currentType[resourceType] && currentType[resourceType]()
  // 删除评论
  sendOrDelComment(params).then(res => {
    if (res.code === 200) {
      Toast('删除成功')
      getMsgCommentsFn()
    }
  })
}

</script>

<style scoped lang="scss">
:deep(.van-pagination) {

  .van-pagination__item--prev, .van-pagination__item--next {

  }

  .van-pagination__item--active {
    color: v-bind('store.theme.hoverTextColor') !important;
  }

  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: v-bind('store.theme.textColor');

    button {
      background-color: v-bind('store.theme.HoverBgColor');
    }
  }
}
</style>
